<template>
  <div ref="bar" class="bar" />
</template>

<script>
// 引入echarts
import echarts from 'echarts'
export default {
  name: 'LineCharts',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  watch: {
    // 重新修改图标的配置数据
    // 图标配置数据可以再次修改，如果有新的数值，用新的数值，没有新的数值，还是用以前的数值
    title() {
      this.myChart.setOption({
        title: {
          text: this.title + '趋势'
        }
      })
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(this.$refs.bar)
    // 配置数据
    this.myChart.setOption({
      title: {
        text: this.title + '趋势'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 330, 220, 421, 215, 254, 236, 422],
          color: 'skyblue'

        }
      ]
    })
  }
}
</script>

<style  scoped>
.bar {
  width: 100%;
  height: 100%;
}

</style>
